<template>
	<view class="container">
		<view class="header">
			<view class="hello">Hi, Andrea</view>
			<view class="introduce">The sign-in event is in progress. Join us soon！</view>
			<view class="search">
				<up-search
					shape="square"
					bgColor="#19191F"
					borderColor="#BABABA"
					height="74rpx"
					:searchIconSize="28"
					placeholder="Search for more great games"
					:showAction="false"
				></up-search>
			</view>
		</view>
		<view class="menu_lists">
			<view class="menu_list">
				<template v-for="(item, index) in menuList" :key="index">
					<view class="menu" :class="{ cur_menu: index == curmenu_index }" @click="clickMenu(index)">
						{{ item }}
					</view>
				</template>
			</view>
			<up-scroll-list :indicator="false">
				<view class="menu_content">
					<view class="menu_item" v-for="(item, index) in 3" :key="index">
						<view class="menu_left">
							<view class="menu_text">Speed Roulette 1 Pragmatic Live Headphone</view>
							<view class="menu_btn">
								<view class="btn_text">ENTRAR</view>
								<image class="arrows_icon" src="@/static/images/home/green_arrows.png" mode=""></image>
							</view>
						</view>
						<image class="user_img" src="@/static/images/home/user_img.png" mode=""></image>
					</view>
				</view>
			</up-scroll-list>
		</view>

		<view class="card_list" v-for="(i, n) in 2" :key="n">
			<view class="card_title">
				<view class="t_text">Panda Boxes</view>
				<view class="t_btn">See All</view>
			</view>
			<up-scroll-list :indicator="false">
				<view class="card_content">
					<view class="card_img" v-for="(item, index) in 5" :key="index">
						<image class="game_img" src="@/static/images/home/game.png" mode=""></image>
					</view>
				</view>
			</up-scroll-list>
		</view>
	</view>
	<page-footer></page-footer>
	
	<tabbar :current='0'></tabbar>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const list1 = reactive([{ name: '关注' }, { name: '推荐' }, { name: '电影' }]);

const menuList = ['Hots', 'Activity', 'Promotion', 'Wallet'];
const curmenu_index = ref(0);

onLoad(() => {
	uni.hideTabBar({
		animation: false
	});
});

onMounted(() => {});

const clickMenu = (index) => {
	curmenu_index.value = index;
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #19191f;
	min-height: 100vh;
	width: 100vw;
	padding: 0 32rpx;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 28rpx;
	.header {
		margin-top: 40rpx;
		.hello {
			line-height: 40rpx;
		}
		.introduce {
			font-size: 44rpx;
			line-height: 64rpx;
			margin-top: 10rpx;
		}
		.search {
			margin-top: 40rpx;
		}
	}
	.menu_lists {
		margin-top: 100rpx;
		.menu_list {
			display: flex;
			align-items: center;
			.menu {
				height: 40rpx;
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				padding: 0 20rpx;
				margin-right: 32rpx;
				font-size: 24rpx;
				line-height: 36rpx;
				transition: all 0.5s ease;

				&:last-child {
					margin-right: 0;
				}
			}
			// .menu:hover {
			// 	background-color: rgba(47, 208, 128, 0.66);
			// 	color: #00b31e;
			// 	font-size: 700;
			// }
			.cur_menu {
				background-color: rgba(47, 208, 128, 0.33);
				color: #00b31e;
				font-size: 700;
			}
		}
		.menu_content {
			margin-top: 45rpx;
			display: flex;
			align-items: center;
			.menu_item {
				width: 650rpx;
				background-color: #0c0c0c;
				display: flex;
				align-items: center;
				padding: 24rpx 36rpx;
				border-radius: 12rpx;
				margin-right: 30rpx;
				box-sizing: border-box;
				&:last-child {
					margin-right: 0;
				}
				.menu_left {
					flex: 1;
					margin-right: 20rpx;
					.menu_text {
						font-size: 36rpx;
						line-height: 60rpx;
					}
					.menu_btn {
						display: flex;
						align-items: center;
						margin-top: 36rpx;
						.btn_text {
							color: #0acf83;
							line-height: 40rpx;
							font-size: 28rpx;
						}
						.arrows_icon {
							width: 40rpx;
							height: 40rpx;
							display: block;
							margin-left: 24rpx;
						}
					}
					.menu_btn:hover {
						background-color: rgba(47, 208, 128, 0.66);
					}
				}
				.user_img {
					height: 270rpx;
					width: 234rpx;
					display: block;
					border-radius: 12rpx;
				}
			}
		}
	}

	.card_list {
		margin-top: 40rpx;
		.card_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.t_text {
				font-size: 32rpx;
				font-weight: bold;
			}
			.t_btn {
				background-color: rgba(47, 208, 128, 0.33);
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				padding: 0 18rpx;
				border-radius: 20rpx;
				color: #00b31e;
			}
		}
		.card_content {
			display: flex;
			margin-top: 40rpx;
			.card_img {
				width: 280rpx;
				height: 320rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12rpx;
				margin-right: 20rpx;
				overflow: hidden;
				&:last-child {
					margin-right: 0;
				}
				.game_img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
}
</style>
